<template>
	<div>
		<el-dialog :title="title" :close-on-click-modal="false" v-dialogDrag :visible.sync="visible" width="70%">
			<el-form :model="inputForm" size="small" ref="inputForm" v-loading="loading"
				:class="method==='view'?'readonly':''" :disabled="method==='view'" label-width="120px">
				<el-row>
					<el-col :span="6">
						<el-form-item label="资产分类" prop="assetsSort"
							:rules="[ {required: true, message:'资产分类不能为空', trigger:'blur'} ]">
							<!-- <el-input v-model="inputForm.assetsSort" placeholder="请填写资产分类"></el-input> -->
							<el-select v-model="inputForm.assetsSort" placeholder="请选择" style="width: 100%;">
								<el-option v-for="item in assetsClassifications" :key="item.id" :label="item.name"
									:value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6" v-if="method==='view'">
						<el-form-item label="固定资产标识卡" prop="markCard" :rules="[ ]">
							<!-- <el-input v-model="inputForm.markCard" placeholder="请填写固定资产标识卡"></el-input> -->
							<el-image style="height: 50px;width:50px;margin-right:10px;" :src="src"
								v-for="(src, index) in inputForm.markCard.split('|')" :key="index"
								:preview-src-list="inputForm.markCard.split('|')"> </el-image>
						</el-form-item>
					</el-col>
					<el-col style="margin-top: 20px;">
						<span style="font-size: 14px; color: #2a8bd8"><i class="el-icon-menu"></i>资产信息：</span>
					</el-col>
					<el-col :span="6">
						<el-form-item label="管理员" prop="adminUser.id"
							:rules="[ {required: true, message:'管理员不能为空', trigger:'blur'} ]">
							<user-select :limit='1' :value="inputForm.adminUser.id"
								@getValue='(value) => {inputForm.adminUser.id=value}'></user-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="资产状态" prop="assetsTtype" :rules="[ {required: true, message:'资产状态不能为空', trigger:'blur'} ]">
							<el-select v-model="inputForm.assetsTtype" placeholder="请选择" style="width: 100%;">
								<el-option v-for="item in $dictUtils.getDictList('assets_type')" :key="item.value"
									:label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="归属部门" prop="office.id" :rules="[ ]">
							<SelectTree ref="office" :props="{
					      value: 'id',             // ID字段名
					      label: 'name',         // 显示名称
					      children: 'children'    // 子级字段名
					    }" url="/sys/office/treeData?type=2" :value="inputForm.office.id" :clearable="true"
								:accordion="true" @getValue="(value) => {inputForm.office.id=value}" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="存放地点" prop="storageAddress" :rules="[ {required: true, message:'存放地点不能为空', trigger:'blur'} ]">
							<el-input v-model="inputForm.storageAddress" placeholder="请填写存放地点"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="购买日期" prop="purchaseDate" :rules="[ {required: true, message:'购买日期不能为空', trigger:'blur'} ]">
							<el-date-picker style="width: 100%;" v-model="inputForm.purchaseDate" type="datetime"
								value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期时间">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="购买价格" prop="price" :rules="[ {required: true, message:'购买价格不能为空', trigger:'blur'} ]">
							<el-input v-model="inputForm.price" placeholder="请填写购买价格"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="资产编码" prop="assetsNumber" >
							<el-input v-model="inputForm.assetsNumber" placeholder="请填写资产编码" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="资产名称" prop="assetsName" :rules="[ {required: true, message:'资产名称不能为空', trigger:'blur'} ]">
							<el-input v-model="inputForm.assetsName" placeholder="请填写资产名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="规格型号" prop="specificate" :rules="[{required: true, message:'规格型号不能为空', trigger:'blur'} ]">
							<el-input v-model="inputForm.specificate" placeholder="请填写规格型号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="计量单位" prop="unit"
							:rules="[ {required: true, message:'计量单位不能为空', trigger:'blur'} ]">
							<!-- <el-input v-model="inputForm.unit" placeholder="请填写计量单位"></el-input> -->
							<el-select v-model="inputForm.unit" placeholder="请选择" style="width: 100%;">
								<el-option v-for="item in measuringUnits" :key="item.id" :label="item.name"
									:value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="资产图片" prop="assetsPpicture" :rules="[ {required: true, message:'资产图片不能为空', trigger:'blur'} ]">
							<el-upload ref="assetsPpicture" v-if="visible" list-type="picture-card"
								:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/dlyrl/oa/fixedassets/fixedAssets`"
								:headers="{token: $cookie.get('token')}" :on-preview="(file, fileList) => {
					       $alert(`<img style='width:100%' src=' ${(file.response && file.response.url) || file.url}'/>`,  {
					         dangerouslyUseHTMLString: true,
					         showConfirmButton: false,
					         closeOnClickModal: true,
					         customClass: 'showPic'
					       });
					   }" :on-success="(response, file, fileList) => {
					      inputForm.assetsPpicture = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
					   }" :on-remove="(file, fileList) => {
					     $http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
					       $message.success(data.msg)
					     })
					     inputForm.assetsPpicture = fileList.map(item => item.url).join('|')
					   }" :before-remove="(file, fileList) => {
					     return $confirm(`确定移除 ${file.name}？`)
					   }" multiple :limit="5" :on-exceed="(files, fileList) =>{
					     $message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
					   }" :file-list="assetsPpictureArra">
								<i class="el-icon-plus"></i>
							</el-upload>
						</el-form-item>
					</el-col>
					<!-- <el-col style="margin-top: 20px;">
						<span style="font-size: 14px; color: #2a8bd8"><i class="el-icon-menu"></i>基本信息：</span>
					</el-col>
					<el-col style="margin-top: 20px;">
						<span style="font-size: 14px; color: #2a8bd8"><i class="el-icon-menu"></i>RFID信息：</span>
					</el-col>
					<el-col :span="6">
						<el-form-item label="EPC" prop="epc" :rules="[ ]">
							<el-input v-model="inputForm.epc" placeholder="请填写EPC"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="TID" prop="tid" :rules="[]">
							<el-input v-model="inputForm.tid" placeholder="请填写TID"></el-input>
						</el-form-item>
					</el-col> -->
					<el-col style="margin-top: 20px;">
						<span style="font-size: 14px; color: #2a8bd8"><i class="el-icon-menu"></i>供应商信息：</span>
					</el-col>
					<el-col :span="6">
						<el-form-item label="供应商类型" prop="supplierType" :rules="[ {required: true, message:'供应商类型不能为空', trigger:'blur'} ]">
							<el-select v-model="inputForm.supplierType" placeholder="请选择" style="width: 100%;">
								<el-option label="客情信息" value="0"></el-option>
								<el-option label="自主填写" value="1"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6" v-if="inputForm.supplierType==0">
						<el-form-item label="供应商" prop="supplier" :rules="[ {required: true, message:'供应商不能为空', trigger:'blur'} ]">
							<GridSelects title="供应商" labelName = 'companyName' labelValue = 'id' :value = "inputForm.supplier" :limit="1"
								@getValue='getValuaes(arguments)'
								:columns="[ { prop: 'companyName', label: '企业名称' }, {prop: 'adminPhone', label: '电话'},{ prop: 'detailedArea', label: '地址' } ]" :searchs="[ { prop: 'companyName', label: '企业名称' }, {prop: 'adminPhone', label: '电话'}, { prop: 'detailedArea', label: '地址' }]" 
							    dataListUrl="/dlyrl/hr/enterpriseinformation/enterpriseInformation/list"
							    entityBeanName="enterpriseInformation"
							    queryEntityUrl="/dlyrl/hr/enterpriseinformation/enterpriseInformation/queryById">
							</GridSelects>
						</el-form-item>
					</el-col>
					<el-col :span="6" v-if="inputForm.supplierType==1">
						<el-form-item label="供应商" prop="supplier" :rules="[ {required: true, message:'供应商不能为空', trigger:'blur'} ]">
							<el-input v-model="inputForm.supplier" placeholder="请填写供应商" ></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="供应商电话" prop="suppliertel" :rules="[ {required: true, message:'供应商电话不能为空', trigger:'blur'} ]">
							<el-input v-model="inputForm.suppliertel" placeholder="请填写供应商电话" :disabled="inputForm.supplierType==0"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="供应商地址" prop="supplierAddre" :rules="[ {required: true, message:'供应商地址不能为空', trigger:'blur'} ]">
							<el-input v-model="inputForm.supplierAddre" placeholder="请填写供应商地址" :disabled="inputForm.supplierType==0"></el-input>
						</el-form-item>
					</el-col>
					
					
					<el-col>
						<span style="font-size: 14px; color: #2a8bd8"><i class="el-icon-menu"></i>使用信息：</span>
					</el-col>
					
					<el-col :span="6" v-if="method==='view'">
						<el-form-item label="使用部门" prop="useoffice.id" :rules="[ ]">
							<SelectTree ref="useoffice" :props="{ value: 'id',             // ID字段名 label: 'name',         // 显示名称 children: 'children'    // 子级字段名
							}" url="/sys/office/treeData?type=2" :value="inputForm.useoffice.id" :clearable="true"
							:accordion="true" @getValue="(value) => {inputForm.useoffice.id=value}" />
						</el-form-item>
					</el-col>
					<el-col :span="6" v-if="method==='view'">
						<el-form-item label="使用人" prop="user.id" :rules="[ ]">
							<user-select :limit='1' :value="inputForm.user.id"
								@getValue='(value) => {inputForm.user.id=value}'></user-select>
						</el-form-item>
					</el-col>
					<el-col :span="6" v-if="method==='view'">
						<el-form-item label="申请使用时间" prop="applyTime" :rules="[ ]">
							<el-date-picker style="width: 100%;" v-model="inputForm.applyTime" type="datetime"
								value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="备注信息" prop="remarks" :rules="[ ]">
							<el-input type="textarea" v-model="inputForm.remarks" placeholder="请填写备注信息"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6" v-if="method==='view'">
						<el-form-item label="使用信息标识卡" prop="useMarkcard" :rules="[ ]">
							<!-- <el-input v-model="inputForm.useMarkcard" placeholder="请填写使用信息标识卡"></el-input> -->
							<el-image style="height: 50px;width:50px;margin-right:10px;" :src="src"
								v-for="(src, index) in inputForm.useMarkcard.split('|')" :key="index"
								:preview-src-list="inputForm.useMarkcard.split('|')"> </el-image>
						</el-form-item>
					</el-col>
					<el-col>
						<span style="font-size: 14px; color: #2a8bd8"><i class="el-icon-menu"></i>折旧信息：</span>
					</el-col>
					<el-col :span="6">
						<el-form-item label="损耗周期(月)" prop="wearcycle" :rules="[ {required: true, message:'损耗周期(月)不能为空', trigger:'blur'} ]">
							<el-input v-model="inputForm.wearcycle" placeholder="请填写损耗周期(月)"></el-input>
						</el-form-item>
					</el-col>
					<el-col style="margin-top: 20px;">
						<span style="font-size: 14px; color: #2a8bd8"><i class="el-icon-menu"></i>自定义参数：</span>
						<el-button @click="addRules" size="small" type="primary">添加</el-button>
					</el-col>
					<el-col v-for="(item, index) in inputForm.paramList" :key="item.index">
						<el-col :span="6" >
							<el-form-item label="新参数名" :prop="'paramList.name'+index" :rules="[ ]">
								<el-input v-model="item.name" placeholder="请填写新参数名"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6" >
							<el-form-item label="新参数值" :prop="'paramList.value'+index" :rules="[ ]">
								<el-input v-model="item.value" placeholder="请填写新参数值"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="3"><el-button @click="deleteRules(item, index)" size="small" style="margin-left: 10px;">删除</el-button></el-col>
					</el-col>
					
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" @click="visible = false">关闭</el-button>
				<el-button size="small" type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定
				</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import GridSelects from '@/components/gridSelect/indexs.vue'
	import SelectTree from '@/components/treeSelect/treeSelect.vue'
	import UserSelect from '@/components/userSelect'
	export default {
		data() {
			return {
				title: '',
				method: '',
				visible: false,
				loading: false,
				assetsPpictureArra: [],
				measuringUnits: [], //计量单位
				assetsClassifications: [], //资产分类
				inputForm: {
					company:{
						id:this.$store.state.user.companyId
					},
					id: '',
					adminUser:{
						id:''
					},
					assetsPpicture: '',
					assetsTtype: '',
					markCard: '',
					storageAddress: '',
					office: {
						id: ''
					},
					assetsNumber: '',
					assetsName: '',
					specificate: '',
					unit: '',
					epc: '',
					tid: '',
					supplier: '',
					suppliertel: '',
					supplierAddre: '',
					purchaseDate: '',
					wearcycle: '',
					price: '',
					useoffice: {
						id: ''
					},
					user: {
						id: ''
					},
					applyTime: '',
					useMarkcard: '',
					assetsSort: '',
					paramList:[{name:'',value:''}],
					remarks: '',
					supplierType: '0' //供应商类型
				}
			}
		},
		components: {
			SelectTree,
			UserSelect,
			GridSelects
		},
		activated() {
			this.getMeasuringUnits();
			this.getAssetsClassifications();
		},
		methods: {
			init(method, id) {
				this.method = method
				this.inputForm.id = id
				if (method === 'add') {
					this.title = `新建固定资产`
				} else if (method === 'edit') {
					this.title = '修改固定资产'
				} else if (method === 'view') {
					this.title = '查看固定资产'
				}
				this.assetsPpictureArra = []
				this.visible = true
				this.loading = false
				this.$nextTick(() => {
					this.$refs.inputForm.resetFields()
					if (method === 'edit' || method === 'view') { // 修改或者查看
						this.loading = true
						this.$http({
							url: `/dlyrl/oa/fixedassets/fixedAssets/queryById?id=${this.inputForm.id}`,
							method: 'get'
						}).then(({
							data
						}) => {
							this.inputForm = this.recover(this.inputForm, data.fixedAssets)
							this.inputForm.assetsPpicture.split('|').forEach((item) => {
								if (item.trim().length > 0) {
									this.assetsPpictureArra.push({
										name: decodeURIComponent(item.substring(item
											.lastIndexOf('/') + 1)),
										url: item
									})
								}
							})
							this.loading = false
						})
					}
				})
			},
			getValuaes(data){
				console.log(data);
				this.inputForm.supplier=data[0]
				this.inputForm.suppliertel=data[1].adminPhone;
				this.inputForm.supplierAddre=data[1].area;
			},
			addRules(){
				this.inputForm.paramList.push({
						name:'',
						value:'',
				})
			},
			deleteRules(item, index) {
				this.index = this.inputForm.paramList.indexOf(item)
				if (index !== -1) {
					this.inputForm.paramList.splice(index, 1)
				}
			},
			//计量单位
			getMeasuringUnits() {
				this.$http({
					url: `/dlyrl/oa/unitassets/unitAssets/getByParent`,
					method: 'get',
					params: {
						type: '0'
					}
				}).then(({
					data
				}) => {
					this.loading = false
					if (data && data.success) {
						this.measuringUnits = data.list;
					}
				})
			},
			getAssetsClassifications() {
				this.$http({
					url: `/dlyrl/oa/unitassets/unitAssets/getByParent`,
					method: 'get',
					params: {
						type: '1'
					}
				}).then(({
					data
				}) => {
					this.loading = false
					if (data && data.success) {
						this.assetsClassifications = data.list;
					}
				})
			},
			//资产分类

			// 表单提交
			doSubmit() {
				this.$refs['inputForm'].validate((valid) => {
					if (valid) {
						this.loading = true
						this.$http({
							url: `/dlyrl/oa/fixedassets/fixedAssets/save`,
							method: 'post',
							data: this.inputForm
						}).then(({
							data
						}) => {
							this.loading = false
							if (data && data.success) {
								this.visible = false
								this.$message.success(data.msg)
								this.$emit('refreshDataList')
							}
						})
					}
				})
			}
		}
	}
</script>
